<template>
  <a-drawer
      :afterVisibleChange="visible=>getDataOptions(visible)"
      :closable="false"
      :title="title"
      :visible="visible"
      :width="width"
      destroyOnClose
      placement="right"
      @close="close"
  >
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-form-item v-show="false" :labelCol="labelCol" :wrapperCol="wrapperCol" label="事件ID">
          <a-input v-show="true" v-model="model.id" readOnly></a-input>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="模型ID">
          <a-input v-show="true" v-model="model.deviceModelBy" readOnly></a-input>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="标识">
          <a-input v-decorator="[ 'code', validatorRules.code]" placeholder="请输入标识"></a-input>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
          <a-input v-decorator="[ 'name', validatorRules.name]" placeholder="请输入名称"></a-input>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="事件来源">
          <a-radio-group v-model="model.type" :defaultValue="0" name="radioGroup">
            <a-radio :value="0">数据提交</a-radio>
            <a-radio :value="1">事件上报</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="事件等级">
          <a-radio-group v-model="model.level" :defaultValue="1" size="small">
            <a-radio-button :value="1" style="color:#b3d4fc;">普通</a-radio-button>
            <a-radio-button :value="2" style="color:#f3af90;">警告</a-radio-button>
            <a-radio-button :value="3" style="color:#ff1e00;">紧急</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="通知类型">
          <j-multi-select-tag
            v-decorator="['notifyType', {rules: [{ required:true, message: '请选择通知模板!' }]}]"
            :triggerChange="true"
            dictCode="msgType"
            placeholder="请选择通知模板" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据选择">
          <a-select v-decorator="['dataBy', { rules:[{required: true, message: '请选择数据节点'}]}]"
                    :allowClear="true"
                    :options="dataOptions"
                    mode="default"
                    placeholder="请选择数据节点"
                    style="width: 100%"
          >
          </a-select>
        </a-form-item>
        <a-form-item v-show="model.type===0" :labelCol="labelCol" :wrapperCol="wrapperCol" label="规则条件">
          <j-search-select-tag
            v-decorator="['dataRule', {rules:[{required: false, message: '请选择规则条件'}]}]"
            :triggerChange="true"
            dict="rule_conditions"
            placeholder="请选择规则条件"
            type="list" />
        </a-form-item>
        <a-form-item v-show="model.type===0" :labelCol="labelCol" :wrapperCol="wrapperCol" label="规则值">
          <a-input v-decorator="[ 'ruleValue', {rules:[{required: this.model.type===0, message: '请输入规则值'}]}]"
                   placeholder="请输入规则值"></a-input>
        </a-form-item>
        <a-form-item v-show="model.type===0" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <span slot="label">
            <a-tooltip title="规则值统一设置为是，设备实例不许单独设置；否则，设备实例可单独设置。">
              <a-icon type="question-circle-o" />
            </a-tooltip>
            统一设置
          </span>
          <a-radio-group v-model="model.isUnified" :defaultValue="0" name="radioGroup">
            <a-radio :value="0" title="">是</a-radio>
            <a-radio :value="1">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="描述">
          <a-textarea v-decorator="['description', validatorRules.description]" allowClear placeholder="请输入描述" rows="3" />
        </a-form-item>

      </a-form>
    </a-spin>

    <div :style="{
              position: 'absolute',
              right: 0,
              bottom: 0,
              width: '100%',
              borderTop: '1px solid #e9e9e9',
              padding: '10px 16px',
              background: '#fff',
              textAlign: 'right',
              zIndex: 1,
            }"
    >
      <a-button :style="{ marginRight: '10px' }" type="primary" @click="handleOk">确定</a-button>
      <a-button type="" @click="close">取消</a-button>
    </div>
  </a-drawer>
</template>

<script>
import pick from 'lodash.pick'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import {getAction, httpAction} from '@/api/manage'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'

export default {
  name: 'FuncDrawer',
  components: {
    JSearchSelectTag,
    JDictSelectTag,
    JMultiSelectTag
  },
  props: ['deviceModelId'],
  data() {
    return {
      form: this.$form.createForm(this),
      title: '',
      width: 500,
      visible: false,
      baseModel: {
        deviceModelBy: '',
        type: 0,
        isUnified: 0
      },
      model: {},
      dataOptions: [],
      confirmLoading: false,
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 16
      },
      validatorRules: {
        code: {
          rules: [
            { required: true, message: '请输入标识!' },
            { min: 2, max: 20, message: '标识长度：2-20个字符' },
            {
              validator: (rule, value, callback) => this.validateDuplicateCode(this.model.deviceModelBy, this.model.id, value, callback)
            }
          ]
        },
        name: {
          rules: [
            { required: true, message: '请输入名称!' },
            { min: 2, max: 20, message: '名称长度：2-20个字符' },
            { validator: (rule, value, callback) => this.validateDuplicateName(this.model.deviceModelBy, this.model.id, value, callback) }
          ]
        },
        type: { rules: [{ required: true, message: '请选择功能类型!' }] },
        description: { rules: [] }
      },
      url: {
        add: '/device/model/addEvent',
        edit: '/device/model/editEvent',
        listInputParams: '/device/model/listInputParams',
        validateCode: '/device/model/validateEventCode',
        validateName: '/device/model/validateEventName'
      }
    }
  },
  computed: {
    type() {
      return this.model.type
    }
  },
  watch: {
    type(val, oval) {
      console.log('watch-type：', oval + '=>' + val)
    }
  },
  created() {
  },
  methods: {
    validateDuplicateCode(modelId, eventId = '', eventCode = '', callback) {
      getAction(this.url.validateCode, { deviceModelId: modelId, eventId: eventId, eventCode: eventCode }).then(res => {
        res['success'] ? callback() : callback(res['message'])
      })
    },
    validateDuplicateName(modelId, eventId = '', eventName = '', callback) {
      getAction(this.url.validateName, { deviceModelId: modelId, eventId: eventId, eventName: eventName }).then(res => {
        res['success'] ? callback() : callback(res['message'])
      })
    },
    close() {
      this.visible = false
    },
    add(deviceModelBy) {
      this.form.resetFields()
      this.model = JSON.parse(JSON.stringify(this.baseModel))
      this.model.deviceModelBy = deviceModelBy
      this.visible = true
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'code', 'name', 'notifyType', 'dataBy', 'dataRule', 'ruleValue', 'description'))
      })
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        console.log(err, values)
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign(this.model, values)
          console.log('表单提交数据', formData)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        }

      })
    },
    getDataOptions(visible) {
      if (!visible) return
      let that = this
      getAction('/sys/dict/getDictItems/iot_device_data,name,id,rw_author!=\'w\' and device_model_by=' + this.deviceModelId, null).then(res => {
        if (res.success) {
          that.dataOptions = res.result
        }
      })
    }
  }

}
</script>

<style lang="less" scoped>

</style>